/** 字号及外边距 **/
@for $i from 0 through 12 {
  $tempSize: $i * 2 + $basic-size;
  .fs#{$tempSize} {
    font-size: #{$tempSize}px
  }

  $tempOffset : $i * $basic-offset + $basic-offset;
  @if $i < 6 {
    .offset-#{$tempOffset} {
      margin: #{$tempOffset}px
    }
    .offset-top-#{$tempOffset} {
      margin-top: #{$tempOffset}px
    }
    .offset-right-#{$tempOffset} {
      margin-right: #{$tempOffset}px
    }
    .offset-bottom-#{$tempOffset} {
      margin-bottom: #{$tempOffset}px
    }
    .offset-left-#{$tempOffset} {
      margin-left: #{$tempOffset}px
    }
  }
}

/** 字体样式 **/
$ta: 'text-align';
$text-extra: (
  left: $ta,
  right: $ta,
  center: $ta,
  nowrap: 'white-space',
  bolder: 'font-weight',
  underline:'text-decoration'
);
/**
  * $t 键
  * $v 值
 */
@each $t,$v in $text-extra {
  .text-#{$t} {
    #{$v}:$t
  }
}

/** 字体颜色 **/
$text-colors: (
  primary: $color-primary,
  default: $color-default,
  important: $color-important,
  secondary: $color-secondary,
  8: $color-gray-8,
  5: $color-gray-5
);
/**
  * $t 键
  * $v 值
 */
 @each $t,$v in $text-colors {
  .text-#{$t} {
    color: $v
  }
}
@each $t,$v in $text-colors {
  .fill-#{$t} {
    fill: $v
  }
}

/** 横向对齐方式 **/
$va: 'vertical-align';
$box-align: (
  middle: $va,
  sub: $va,
  bottom: $va,
  super: $va
);

/**
  * $t 键
  * $v 值
 */
@each $t,$v in $box-align {
  .box-#{$t}{
    #{$v}: $t
  }
}

/** 布局 **/
.fx-{
  &cell {
    display: flex;
  }
  &cell-body {
    flex: 1;
  }
  &jc-ct {
    justify-content: center;
  }
  &jc-fs {
    justify-content: flex-start;
  }
  &jc-fe {
    justify-content: flex-end;
  }
  &jc-sb {
    justify-content: space-between;
  }
  &jc-sa {
    justify-content: space-around;
  }
  &ai-ct {
    align-items: center;
  }
  &ai-fe {
    align-items: flex-end;
  }
  &ai-fs {
    align-items: flex-start;
  }
  &sb-ct {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &dr-cl {
    flex-direction: column;
  }
  &dr-rw {
    flex-direction: row;
  }
  &dr-cr {
    flex-direction: column-reverse;
  }
  &dr-rr {
    flex-direction: row-reverse;
  }
}

/** 宽高 **/
@mixin size($w, $h: $w) {
  width: $w;
  height: $h;
}

/** 行高 **/
@mixin lineheight($h, $lh: $h) {
  height: $h;
  line-height: $lh;
}